feat: Add Collector Home page#447
Open
justin212407 wants to merge 14 commits into
Open
Conversation
✅ Deploy Preview for otel-ecosystem-explorer ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
| </Routes> | ||
| </Suspense> | ||
| </ErrorBoundary> | ||
| )} |
Member
There was a problem hiding this comment.
Stray )} with no matching opening, looks like a leftover from removing the {isEnabled("JAVA_CONFIG_BUILDER") && ( block. Either drop this line or restore the gated block above it.
Author
There was a problem hiding this comment.
I missed this out while resolving the merge conflicts. Fixed it.
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a Collector landing page and splits the Collector component explorer into a dedicated route.
Changes:
- Introduces
CollectorExploreLandingwith stats, cards, CTA links, resources, loading, and error states. - Moves component browsing into
CollectorComponentsPagewith type/distribution query filters. - Updates routing so
/collectoris the landing page and/collector/components...serves explorer/detail routes.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
ecosystem-explorer/src/features/collector/components/collector-explore-landing.tsx |
Adds Collector landing UI and data loading. |
ecosystem-explorer/src/features/collector/components/collector-explore-landing.test.tsx |
Adds landing page tests. |
ecosystem-explorer/src/features/collector/collector-page.tsx |
Replaces explorer shell with Collector landing page shell. |
ecosystem-explorer/src/features/collector/collector-page.test.tsx |
Updates Collector page shell test. |
ecosystem-explorer/src/features/collector/collector-components-page.tsx |
Adds dedicated component explorer route/page. |
ecosystem-explorer/src/App.tsx |
Registers Collector landing, component explorer, and detail routes. |
Comments suppressed due to low confidence (1)
ecosystem-explorer/src/features/collector/collector-components-page.tsx:290
- These card links no longer match
CollectorDetailPage: the route passesversion/id, butcollector-detail-page.tsxstill readsdistribution/nameparams and the version from the query string. As a result, clicking any component opens the detail page with empty distribution/name and shows the error state instead of loading the component.
filteredComponents.map((comp) => (
<Link
key={comp.id}
to={`/collector/components/${currentVersion}/${comp.id}`}
Comment on lines
+79
to
+83
| return ( | ||
| <BrowserRouter> | ||
| <div className="bg-background flex min-h-screen flex-col"> | ||
| <Header /> | ||
| <main className="flex-1 pt-16"> |
Comment on lines
+195
to
+206
| async function loadCollectorLandingStats(): Promise<CollectorLandingStats> { | ||
| const [indexResponse, versionData] = await Promise.all([ | ||
| fetch("/data/collector/index.json"), | ||
| loadVersions(), | ||
| ]); | ||
|
|
||
| if (!indexResponse.ok) { | ||
| throw new Error(`Collector index request failed with ${indexResponse.status}.`); | ||
| } | ||
|
|
||
| const payload: unknown = await indexResponse.json(); | ||
| const components = readCollectorComponents(payload); |
Comment on lines
+383
to
+384
| export function CollectorComponentsPage() { | ||
| const { version: urlVersion } = useParams<{ version: string }>(); |
| <CollectorPageInner /> | ||
| )} | ||
| </div> | ||
| <CollectorExploreLanding /> |
| }, [components, distributionFilter, searchQuery, typeFilter]); | ||
|
|
||
| const handleVersionChange = (val: string) => { | ||
| navigate(`/collector/components/${val}`); |
Member
|
Hi @justin212407, quick follow up - did you have a chance to look at the results from Copilot's review? |
Author
Yes I am sorry i am working on making those changes, was a bit preoccupied with some other work, will make the fixes and push the changes soon |
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
This PR introduces a fully implemented OpenTelemetry Collector landing page and separates the Collector component explorer into its own dedicated route.
Changes:
Collector Landing Page
PageContainerBackButtonCollectorExploreLandingCollectorExploreLanding
Added a new landing component featuring:
/data/collector/index.jsonRouting Updates
Updated routing behavior so that:
/collector/collector/components/collector/components/:version/collector/components/:version/:idFilter Support
Added query parameter support for component filtering:
Screenshots:
Screencast.From.2026-05-11.23-46-47.mp4
Tests:
Verification:
Successfully ran: